<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        span{
            flex:1;
            min-width: 500px;
            display: flex;
            align-items: center;
        }
        #s1{
            height: calc(100vh - 90px);
        }
    </style>
</head>
<body>
    <div>
        <span id="s1">1</span>
        <span>2</span>
        <span>3</span>
        <span>4dsafasfdasdfsafasdf safsdf</span>
        <span style="min-width:900px;">5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse iste reprehenderit magnam voluptatem ipsum labore odit porro eius, expedita numquam aperiam nostrum perferendis iure sit, corrupti accusamus fugit nesciunt doloribus tenetur aut saepe consequuntur. Libero dicta illum architecto earum velit incidunt consequatur aliquid ratione vel ducimus quasi voluptas, omnis quos totam provident fugiat a officiis, eum sapiente voluptates? Necessitatibus nihil magnam sed officiis, consectetur autem? Dolorum culpa voluptas repellat consectetur rem natus, aperiam quas repellendus! Est, officiis? Neque voluptates velit repellat temporibus nisi in ab eum reiciendis numquam quam nulla perspiciatis facilis illo ratione laudantium, atque, cupiditate, itaque impedit expedita!</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
    </div>
</body>
</html>